<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>数据分析</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/analyzeDistribution">知识分布</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div id="container" style="min-width:400px;height:400px"></div>
    </Content>
  </div>
</template>
<script>
export default {
  data() {
    return {
      socialContact: 0,
      school       : 0,
      study        : 0,
      life         : 0,
      schoolship   : 0,
      test         : 0,
      allQuestion  : 0
    };
  },
  methods: {},
  mounted() {
    var that = this;
    var url  = that.Api.url.allQuestion;
    that.http.get(url).then(res => {
      console.log(res);
      that.allQuestion = res.length;
      for (var i = 0; i < res.length; i++) {
        if (res[i].knowledgeType == 1) {
          that.socialContact++;
        } else if (res[i].knowledgeType == 2) {
          that.school++;
        } else if (res[i].knowledgeType == 3) {
          that.study++;
        } else if (res[i].knowledgeType == 4) {
          that.life++;
        } else if (res[i].knowledgeType == 5) {
          that.schoolship++;
        } else if (res[i].knowledgeType == 6) {
          that.test++;
        }
      }
      var socialContact = parseFloat(
        (that.socialContact / that.allQuestion).toFixed(2)
      );
      var school     = parseFloat((that.school / that.allQuestion).toFixed(2));
      var study      = parseFloat((that.study / that.allQuestion).toFixed(2));
      var life       = parseFloat((that.life / that.allQuestion).toFixed(2));
      var schoolship = parseFloat(
        (that.schoolship / that.allQuestion).toFixed(2)
      );
      var test = parseFloat((that.test / that.allQuestion).toFixed(2));
      console.log(socialContact, school, study, life, schoolship, test);
      var chart = Highcharts.chart("container", {
        title: {
          text         : "知识分布",
          align        : "center",
          verticalAlign: "middle",
          y            : 50
        },
        tooltip: {
          headerFormat: "{series.name}<br>",
          pointFormat : "{point.name}: <b>{point.percentage:.1f}%</b>"
        },
        plotOptions: {
          pie: {
            dataLabels: {
              enabled : true,
              distance: -50,
              style   : {
                fontWeight: "bold",
                color     : "white",
                textShadow: "0px 1px 2px black"
              }
            },
            startAngle: -90,            // 圆环的开始角度
            endAngle  : 90,             // 圆环的结束角度
            center    : ["50%", "75%"]
          }
        },
        series: [
          {
            type     : "pie",
            name     : "知识类型占比",
            innerSize: "50%",
            data     : [
              ["社交", socialContact],
              ["学校", school],
              ["学习", study],
              ["生活", life],
              ["奖学金与补助", schoolship],
              {
                name      : "测试",
                y         : test,
                dataLabels: {
                  // 数据比较少，没有空间显示数据标签，所以将其关闭
                  // enabled: false
                }
              }
            ]
          }
        ]
      });
    });
  }
};
</script>